<template>
	<div class="mainos">
		<div class="main_spac1" style="padding-bottom: 5px">
			<div class="main_white padding10">
				<el-form
					:inline="true"
					:rules="rules"
					:model="monitorForm"
					class="demo-form-inline marginTop0"
					ref="userListFrom"
					label-width="60px"
				>
					<div class="main_crumbs boxdq">
						<div class="main_crumbs_l">
							<a href="javascript:;" @click="$router.back(-1)">
								<i class="el-icon-arrow-down"></i>返回
							</a>
							<em>|</em>
							<span>收货</span>
						</div>
					</div>
					<!-- <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>单据信息</div>
          </div>
          <div class="main_xq">
            <ul class="boxha">
              <li>
                采购单号：<span>{{ info.order_sn }}</span>
              </li>
            </ul>
          </div> -->
					<div class="main_tile boxdq marginTop15">
						<div class="main_tile_l marginLeft0"><em></em>商品列表</div>
					</div>
					<div class="main_white padding10 marginBottom10">
						<div class="main_white">
							<div class="mainor_sp boxha">
								<ul class="box">
									<li class="box">
										<el-input
											v-model.trim="formsp.value"
											ref="focusw2"
											placeholder="商品名称"
											clearable
											class="wid240"
											@keyup.enter.native="mainor_qr"
										></el-input>
									</li>
								</ul>
								<div class="marginBottom10">
									<el-button type="primary" @click="mainor_qr"
										>置顶(回车)</el-button
									>
								</div>
							</div>
							<div class="main_table marginTop0">
								<el-table
									ref="multipleTable"
									:data="monitorForm.list"
									element-loading-text="加载中"
									fit
									border
									highlight-current-row
									:header-cell-class-name="this.$verticaline"
								>
									<el-table-column label="序号">
										<template slot-scope="scope">{{
											scope.$index + 1
										}}</template>
									</el-table-column>
									<el-table-column label="商品名称" prop="name" width="150">
										<template slot-scope="scope">
											{{ scope.row.name }}【{{ scope.row.spu_name }}】
										</template>
									</el-table-column>
									<el-table-column label="配送单价" prop="sort_price" />
									<el-table-column label="配送数量" prop="sort_num">
									</el-table-column>
									<el-table-column label="未收数量" prop="uncollected_num">
									</el-table-column>
									<el-table-column
										label="本次收货数量"
										prop="collected_num"
										width="150"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item
												:prop="'list.' + scope.$index + '.collected_num_now'"
												:rules="rules.num"
												label-width="10px"
												label=" "
											>
												<el-input
													v-model.trim="scope.row.collected_num_now"
													placeholder="本次收货数量"
													class="wid110"
													@change="(val) => inputchnage(val, scope, 0)"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column
										label="入库SKU"
										prop="spu_id"
										width="150"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item
												:prop="'list.' + scope.$index + '.spu_id'"
												label-width="10px"
												label=" "
											>
												<!-- :rules="rules.sku" -->
												<el-select
													v-model.trim="scope.row.spu_id"
													placeholder="入库SKU"
													class="wid110"
													@change="(val) => changeSpu(val, scope)"
												>
													<el-option
														v-for="(spu, index) in scope.row.spus"
														:key="index"
														:label="spu.spu_name.title"
														:value="spu.spu_name.id"
													></el-option>
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column
										label="换算比"
										:render-header="
											(h, obj) => renderHeader_purchase(h, obj, 0)
										"
										prop="scaling"
									/>
									<el-table-column
										label="入库单价"
										prop="storage_price"
										width="150"
										class-name="main_hei"
										:render-header="
											(h, obj) => renderHeader_purchase(h, obj, 1)
										"
									>
										<template slot-scope="scope">
											<el-form-item
												:prop="'list.' + scope.$index + '.storage_price'"
												:rules="rules.price"
												label-width="10px"
												label=" "
											>
												<el-input
													v-model.trim="scope.row.storage_price"
													placeholder="入库单价"
													class="wid110"
													@change="(val) => inputchnage(val, scope, 1)"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column
										label="入库数量"
										prop="storage_num"
										width="150"
										class-name="main_hei"
										:render-header="
											(h, obj) => renderHeader_purchase(h, obj, 2)
										"
									>
										<template slot-scope="scope">
											<el-form-item
												:prop="'list.' + scope.$index + '.storage_num'"
												:rules="rules.num"
												label-width="10px"
												label=" "
											>
												<el-input
													v-model.trim="scope.row.storage_num"
													placeholder="入库数量"
													class="wid110"
													@change="(val) => inputchnage(val, scope, 1)"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column
										label="状态"
										prop="collected_status_text"
										class-name="main_hei"
									>
									</el-table-column>
									<el-table-column
										label="备注"
										prop="remark"
										width="350"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item label-width="0" label="">
												<el-input
													v-model.trim="scope.row.remark"
													placeholder="备注"
													class="wid240"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>

					<div class="newConBox_p200 paddingBottom10" id="newConBox">
						<div class="newConBox_h32">
							<div
								:class="['mainor_pr boxdq newConBox ', { on: searchBarFixed }]"
							>
								<div class="mainor_prl">
									<el-button
										type="primary"
										@click="preservation(1)"
										v-repeatClick
										>部分收货</el-button
									>
									<el-button v-repeatClick @click="preservation(2)"
										>全部收货</el-button
									>
									<el-button @click="$router.back(-1)">取消</el-button>
								</div>
							</div>
						</div>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import { bulk_order_finish_list, bulk_order_finish } from "@/api/bulk/index";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import rules from "@/rules/purchasing/purchasingPurchase_record";
	import { parseTime } from "@/utils/index";
	import { uploadPath } from "@/api/currency";

	export default {
		computed: {},

		components: {},
		data() {
			return {
				// 验证
				rules,
				// 时间
				parseTime,
				listLoading: false,
				// 列表数据
				monitorForm: {
					list: [
						{
							goods: {
								spu: [
									{
										spu_name: {},
									},
								],
							},
						},
					],
				},
				// 商品搜索
				formsp: {
					value: "",
				},
				// id
				id: this.$route.params.id,
				// 监听滚动
				searchBarFixed: false,
				isEdit: false,
			};
		},
		mounted() {
			window.addEventListener("scroll", this.handleScroll);
		},
		destroyed() {
			window.removeEventListener("scroll", this.handleScroll);
		},
		created() {
			// 基本信息
			this.bulk_order_finish_list();
		},
		beforeRouteLeave(to, from, next) {
			if (this.isEdit) {
				setTimeout(() => {
					this.$confirm(
						"您已经有数据操作，离开页面系统不会保存您的操作，确定离开吗？",
						"提示",
						{
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						}
					)
						.then(() => {
							// 正常跳转
							next();
						})
						.catch(() => {
							next(false);
						});
				}, 200);
			} else {
				next();
			}
		},
		methods: {
			renderHeader_purchase(h, { column, $index }, type) {
				let content = "";
				switch (type) {
					case 0:
						content = "注释：批发SKU互调比/入库SKU互调比";
						break;
					case 1:
						content = "注释：入库单价=下单单价/换算比";
						break;
					case 2:
						content = "注释：入库数量=本次收货数量*换算比";
						break;
				}
				return h("div", [
					h("span", {
						domProps: {
							innerHTML: column.label,
						},
					}),
					h(
						"el-tooltip",
						{
							attrs: {
								effect: "dark",
								content: content,
								placement: "top",
							},
						},
						[
							h("i", {
								style: "margin-left: 5px;margin-top:-1px;",
								class: "el-icon-question table-msg",
							}),
						]
					),
				]);
			},
			// 监听滚动
			handleScroll() {
				let scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop;
				scrollTop + document.documentElement.clientHeight >
				document.getElementById("newConBox").offsetTop + 300
					? (this.searchBarFixed = false)
					: (this.searchBarFixed = true);
			},

			// 置顶
			mainor_qr() {
				this.isEdit = true;
				let formsp = JSON.parse(JSON.stringify(this.formsp));
				let list = JSON.parse(JSON.stringify(this.monitorForm.list));
				if (formsp.name != "") {
					list.map((e, index) => {
						if (
							(e.name && e.name.includes(formsp.value)) ||
							(e.goods_spu_list.goods_spu_code &&
								e.goods_spu_list.goods_spu_code.includes(formsp.value))
						) {
							let sz = {};
							sz = e;
							list.splice(index, 1);
							list.unshift(sz);
						}
					});
					this.monitorForm.list = list;
				}
			},

			// 删除
			scdelete(index, type) {
				this.monitorForm.list.splice(index, 1);
			},
			// 修改单价以及小计
			inputchnage(val, scope, type) {
				console.log(val, scope, type);
				if (!/^-?\d*\.?\d*$/.test(val)) {
					// this.$message.error("请输入数字");
					return;
				}
				if (type == 0) {
					scope.row.storage_num = this.$toFixed(
						parseFloat(scope.row.collected_num_now * scope.row.scaling)
					);
					scope.row.storage_price = this.$toFixed(
						parseFloat(
							(scope.row.sort_price * scope.row.collected_num_now) /
								scope.row.storage_num
						)
					);
				}
			},
			// 保存
			preservation(type) {
				this.$refs["userListFrom"].validate((valid) => {
					if (valid) {
						let arry = [];
						let monitorForm = JSON.parse(JSON.stringify(this.monitorForm));
						monitorForm.list.map((e) => {
							let spu_id = e.spu_id;
							let spus = [];
							spus = e.goods ? e.goods.spu : [];
							let item = spus.filter((p) => {
								if (p.spu_name.id == spu_id) {
									return { ...p };
								}
							});

							let form = {
								id: e.id,
								goods_id: e.goods ? e.goods.id : "",
								goods_spu_id: item.length > 0 ? item[0].id : "",
								standard_code: e.standard_code,
								standard_spu_code:
									item.length > 0 ? item[0].standard_spu_code : "",
								num: e.storage_num,
								price: e.storage_price,
								collected_num_now: e.collected_num_now,
								remark: e.remark,
							};

							if (e.goods && e.goods.spu.length > 0) {
								e.goods.spu.map((a) => {
									if (e.spu_id == a.spu_name.id) {
										form.standard_spu_code = a.standard_spu_code;
									}
								});
							}
							arry.push(form);
						});

						let no_goods_spu_id = arry.filter((e) => {
							if (e.goods_spu_id == "" || e.goods_spu_id == undefined) {
								return e;
							}
						});

						let form = {
							list: JSON.stringify(arry),
							id: this.id,
						};

						if (type == 1) {
							if (no_goods_spu_id.length > 0) {
								this.$message.error(
									`你要【${no_goods_spu_id.length}】个商品暂未添加，请先添加该商品`
								);
							} else {
								this.bulk_order_finish(form);
							}
						} else if (type == 2) {
							let monitorForm = JSON.parse(JSON.stringify(this.monitorForm));
							let num = 0;
							monitorForm.list.map((e) => {
								if (
									e.collected_num_now > e.sort_num ||
									e.collected_num_now < e.sort_num
								) {
									num += 1;
								}
							});
							if (num > 0) {
								this.$confirm(
									`您有【${num}】件商品未全部收货或超过收货数量`,
									"提示",
									{
										confirmButtonText: "确定",
										cancelButtonText: "取消",
										type: "warning",
									}
								).then(() => {
									this.bulk_order_finish(form);
								});
							} else {
								this.bulk_order_finish(form);
							}
						}
					}
				});
			},
			bulk_order_finish(form) {
				let data = Object.assign(
					apiUrl().name,
					form
				);
				bulk_order_finish(data).then((res) => {
					if (res.errcode == 0) {
						this.$message({
							message: "保存成功",
							type: "success",
						});
						this.isEdit = false;
						this.$router.go(-1);
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			// 基本信息
			bulk_order_finish_list() {
				let data = Object.assign(
					apiUrl().name,
					{ id: this.id }
				);
				bulk_order_finish_list(data).then((res) => {
					if (res.errcode == 0) {
						res.data.info.order_list_info.map((e) => {
							let uncollected_num = (uncollected_num =
								parseFloat(e.sort_num) - parseFloat(e.collected_num));
							e.uncollected_num = this.$toFixed(uncollected_num);
							e.collected_num_now = e.uncollected_num;
							e.spu_id = "";
							e.scaling = "";
							if (e.goods && e.goods.spu[0]) {
								e.spu_id = e.goods.spu[0].spu_name.id;
								e.scaling = e.goods.spu[0].package_num / e.package_num;
							}
							e.storage_price = e.order_price;
							if (e.scaling) {
								e.storage_price = e.order_price / e.scaling;
							}
							e.storage_num = e.collected_num_now * e.scaling;
							e.spus = null;
							if (e.goods) {
								e.spus = e.goods.spu;
							}

							switch (e.collected_status) {
								case 0:
									e.collected_status_text = "未收货";
									break;
								case 1:
									e.collected_status_text = "部分收货";
									break;
								case 2:
									e.collected_status_text = "全部收货";
									break;
							}
						});
						this.monitorForm.list = res.data.info.order_list_info;
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			// SKU选择
			changeSpu(val, scope) {
				let spu = scope.row.goods.spu;
				spu.map((e) => {
					scope.row.scaling = e.package_num / scope.row.package_num;
				});
				scope.row.storage_price = this.$toFixed(
					parseFloat(scope.row.order_price * scope.row.scaling)
				);
				scope.row.storage_num = this.$toFixed(
					parseFloat(scope.row.collected_num_now / scope.row.scaling)
				);
			},
		},
	};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
	.main_tile {
		.mainos_tile_r {
			color: $colour_red;
			font-size: $font_14;
		}
	}
	.newConBox.on {
		margin-left: -10px;
	}
	.main_table {
		/deep/.el-table--small td {
			padding-top: 0;
		}
		/deep/.el-form-item--small.el-form-item {
			margin-bottom: 16px;
			margin-top: 16px;
			margin-right: 0;
		}
	}
	.main_xq {
		ul {
			li {
				.main_xqi {
					width: 80%;
					margin-left: 5px;
				}
				.main_upImg {
					/deep/ul {
						li {
							padding-left: 0;
						}
					}
					/deep/.el-upload-list--picture-card
						.el-upload-list__item:first-child {
						margin-left: 145px;
					}
				}
			}
		}
	}
	.mainor_sp {
		ul {
			margin-right: 20px;
			li {
				margin-bottom: 10px;
				& > span {
					display: inline-block;
					line-height: 32px;
					width: 60px;
					color: $colour_18;
					font-size: $font_14;
					text-align: right;
					em {
						color: $colour_red;
						margin-right: 5px;
					}
				}
				&:first-child {
					& > span {
						width: 85px;
					}
				}
			}
		}
	}
	.mainor_pr {
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.base_p {
		width: 80px;
	}
	.main_page_top {
		margin-top: 7px;
		margin-left: 10px;
		use {
			fill: $menuText;
		}
		&:hover {
			cursor: pointer;
			use {
				fill: $menuActiveText;
			}
		}
	}
}
</style>
